<template>
    <div class="balance_detail">
        <van-nav-bar title="区域总收益" left-arrow fixed @click-left="onClickLeft" :class="{ scrolled: isScrolled }">
        </van-nav-bar>
        <div class="balance_detail_top">
            <div>{{ total_amount }}</div>
            <div>区域总收益</div>
        </div>

        <div class="balance_detail_content">
            <!--  -->
            <div class="balance_detail_content_day" @click="dayShow = true">{{ days }}<van-icon name="arrow-down"
                    style="color: #999;" /></div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="balance_list" v-for="(item, index) in list" :key="index">
                    <div class="balance_list_left">
                        <div>{{ item.remark }}</div>
                        <div>{{ item.create_time }}</div>
                    </div>
                    <div class="balance_list_right" :style="{ color: item.income == true ? '#55A624' : '#55A624' }">
                        {{ item.amount }}</div>
                </div>
            </van-list>
        </div>
        <van-calendar  :min-date="minDate" :max-date="maxDate" :style="{ height: '55%' }" v-model="dayShow"
        type="range" @confirm="onConfirmDay" :show-title="false" @close="handleCancel" color="#1989fa" :value="date" :allow-same-day="true" />
    </div>
</template>
<script>
import { parseTime } from '@/tool/methods'
import {
    INCOME_STATISTICS,
    LOG_INCOME_LIST
} from "@/api/mine";
export default {
    name: 'balance',
    data() {
        const today = new Date();
        const threeMonthsAgo = new Date();
        threeMonthsAgo.setMonth(today.getMonth() - 6); // 当前日期向前推三个月
        return {
            days: "选择日期",
            dayShow: false,
            minDate: threeMonthsAgo, // 最小日期为三个月前
            maxDate: today, // 最大日期为今天
            loading: false,
            finished: false,
            list: [],
            page: 1,
            pageSize: 20,
            isScrolled: false,
            total_amount:0,
            date:''
        }
    },
    created() {

    },
    mounted() {
        // this.msg = this.$route.query.id
        document.title = "区域总收益"
        window.addEventListener("scroll", this.handleScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll);

    },
    methods: {
        handleScroll() {
            // console.log(window.scrollY);

            this.isScrolled = window.scrollY > 26;
        },
        onClickLeft() {
            this.$router.back()
        },        // 日期
        onConfirmDay(val) {
            this.date = parseTime(val[0], '{y}-{m}-{d}') + '-' + parseTime(val[1], '{y}-{m}-{d}')
            this.days = parseTime(val[0], '{y}-{m}-{d}') + '~' + parseTime(val[1], '{y}-{m}-{d}')
            this.dayShow = false
            this.page = 1;
            this.list = [];
            this.finished = false;
            this.loading = true;
            this.onLoad();
        },
        handleCancel(){
            console.log(11);
            
        },
        onLoad() {
            // console.log(11);
            
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['code'] = this.$route.query.id;
            params['level']=this.$route.query.msg;
            params['date_range'] = this.days == '选择日期' ? '' : this.days;
            const id = this.$route.query.id;
            this.$http.get(`/agent/data/income_list`,{params})
                .then(res => {
                    const { list } = res.data;
                    this.total_amount = res.data.total_amount;
                    if (list && list.length) {
                        this.page++;
                        this.list = this.list.concat(list);

                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })


        }
    }
}
</script>
<style lang="scss" scoped>
.balance_detail {
    padding-top: 46px;
    background-color: #F2F4F5;
    height: calc(100vh - 46px);

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }

    ::v-deep .van-nav-bar__left .van-icon {
        color: #fff;
    }

    ::v-deep .van-nav-bar__title {
        width: 150px;
        color: #fff;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-nav-bar__text {
        color: #fff;
    }

    ::v-deep .van-nav-bar {
        background: transparent;
        position: fixed; // 改为固定定位
        top: 0; // 添加这行
        left: 0; // 添加这行
        right: 0; // 添加这行
        z-index: 1000; // 添加这行，确保它在其他元素之上

        // position: fixed;
        &.scrolled {
            background-color: #ffffff; // 或者你想要的任何颜色

            .van-nav-bar__title,
            .van-icon,
            .van-nav-bar__text {
                color: #333; // 滚动后变为黑色
            }
        }
    }

    .balance_detail_top {
        width: 100%;
        height: 4.72rem;
        background: url('../../../images/mine/img_beij4.png') no-repeat center;
        position: relative;
        /* 相对定位 */
        top: -46px;
        /* 根据你的 NavBar 高度调整，Vant UI 默认 NavBar 高度为 46px */
        width: 100%;
        background-size: cover;
        color: #fff;
        text-align: center;
        padding-top: 1.5rem;
        box-sizing: border-box;

        div:nth-child(1) {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .6rem;
            color: #FFFFFF;
            line-height: .84rem;
            // text-align: right;
            font-style: normal
        }

        div:nth-child(2) {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .32rem;
            color: #FFFFFF;
            line-height: .44rem;
            // text-align: right;
            font-style: normal;
            margin-top: .12rem;
        }
    }

    .balance_detail_content {
        width: 95%;
        height: calc(100vh - 4rem);
        margin: 0 auto;
        border-radius: .2rem;
        overflow: auto;
        // border-top-right-radius: .2rem;
        background: #fff;
        padding-top: .4rem;
        box-sizing: border-box;
        margin-top: -1.9rem;
        position: relative;
        z-index: 1;
        padding: .2rem;
        box-sizing: border-box;

        .balance_detail_content_day {
            // min-width: 1.2rem;
            // max-width: 2rem;
            display: inline-block;
            padding: .06rem .2rem;
            border-radius: .36rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .24rem;
            color: #666666;
            // padding: .08rem 0;
            box-sizing: border-box;
            text-align: center;
            font-style: normal;
            border: 1px solid #8A8A8A;

            ::v-deep .van-icon {
                color: #666;
            }
        }

        .balance_list {
            margin-top: .2rem;
            padding-bottom: .2rem;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            justify-content: space-between;

            .balance_list_left {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #333333;
                line-height: .4rem;
                // text-align: left;
                font-style: normal;

                div:last-child {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: .24rem;
                    color: #999999;
                    line-height: .34rem;
                    // text-align: left;
                    font-style: normal;
                    margin-top: .12rem;

                }
            }

            .balance_list_right {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .32rem;
                color: #55A624;
                line-height: .44rem;
                // text-align: center;
                font-style: normal;
            }
        }

    }
}

.tips {
    width: 50%;
    min-height: auto;
    max-height: 2rem;
    overflow: auto;
    position: absolute;
    left: 30%;
    top: 90%;
    background: #333;
    white-space: wrap;
    border-radius: .1rem;
    text-align: left;
    padding: .1rem;
    font-size: .28rem;
    font-weight: 400;
}

.tips::after {
    content: '';
    position: absolute;
    left: 50%;
    /* 使三角形居中 */
    bottom: 100%;
    /* 放置在 tips 的上方 */
    margin-left: -0.1rem;
    /* 调整位置，使三角形居中 */
    border-width: 0.1rem;
    /* 设置三角形的大小 */
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    /* 三角形颜色 */
}
</style>